<!--  -->
<template>
  <div>
    <b-carousel id="carousel1"
      style="text-shadow: 1px 1px 2px #333;"
      indicators
      background="#ababab"
      :interval="3000"
      img-width="1024"
      img-height="480"
    >
      <router-link to="product" v-for="(i,index) in 3" :key="index">
        <b-carousel-slide img-src="/static/images/banner1.jpg"></b-carousel-slide>
      </router-link>
    </b-carousel>
    <b-card title="为企业提供云计算的平台"
          tag="article"
          class="text-center">
      <p class="card-text">
        提供最新的云计算应用工能实时更新您的服务云计算的平台
      </p>
      <b-container>
        <b-row>
          <b-card title="变现服务"
            tag="article"
            img-src="/static/images/icon-s1.png"
            img-alt="Image"
            img-top
            class="text-center col-md-4 col-sm-6 col-xs-12 service-box"
            v-for="(item,index) in 6"
            :key="index">
            <p class="card-text">
              应用为中心，简化应用管理，提升运维效率，支持负载均衡、弹性伸缩、高可靠等。
            </p>
          </b-card>
        </b-row>
      </b-container>
    </b-card>
    <b-card title="为什么选择四彩云计算平台"
      tag="article"
      body-bg-variant="light"
      class="text-center">
      <p class="card-text">
        经大规模生产环境验证的企业级容器云平台
      </p>
      <b-container>
        <b-row>
          <b-col lg="4" md="12">
            <b-card :title="item.title"
              tag="article"
              class="text-right reason-box"
              v-for="(item,index) in reasonBox"
              :key="index"
              v-if="index < 3">
              <p class="card-text">
                {{item.text}}
              </p>
            </b-card>
          </b-col>
          <b-col lg="4" md="12">
            <img src="/static/images/icon-edn.png" alt="" class="w-100" >
          </b-col>
          <b-col lg="4" md="12">
            <b-card :title="item.title"
              tag="article"
              class="text-left reason-box"
              v-for="(item,index) in reasonBox"
              :key="index"
              v-if="index >= 3">
              <p class="card-text">
                {{item.text}}
              </p>
            </b-card>
          </b-col>
        </b-row>
      </b-container>
    </b-card>
    <b-card title="逾十个行业已在四彩云计算平台"
      tag="article"
      class="text-center industry-box">
      <p class="card-text">
        助力企业通过四彩云计算实现互联网
      </p>
      <b-container>
        <b-row>
          <b-col lg="3" md="6" sm="12" v-for="i in 8" :key="i">
            <hover-img title="互联网" text="让互联网在路上走得更远"  source="/static/images/class1.jpg"></hover-img>
          </b-col>
        </b-row>
      </b-container>
    </b-card>
    <enterprise></enterprise>
  </div>
</template>

<script>
import {Carousel, Card} from 'bootstrap-vue/es/components'
import HoverImg from '@/components/HoverImg'
import Enterprise from '@/components/Enterprise'

export default {
  name: 'home',

  components: {
    Carousel,
    Card,
    HoverImg,
    Enterprise
  },

  data () {
    return {
      reasonBox: [{
        title: '大数据处理平台',
        text: '应用为中心，简化应用管理，提升运维效率，支持负载均衡、弹性伸缩、高可靠等用户需要更实时，更智能的应用。要满足这些需求，企业需要一个大数据处理平台做支撑。'
      }, {
        title: '快速搭建生产环境',
        text: '一键部署上万种 Docker 容器化应用快速部署 根据客户业务需求根据客户业务需求。'
      }, {
        title: '先进的自动运维',
        text: '以应用为核心，提供服务发现、服务编排等功能，满足应用的快速发布、弹性扩展。'
      }, {
        title: '多环境支持',
        text: '以应用为核心，提供服务发现、服务编排等功能，满足应用的快速发布、弹性扩展。'
      }, {
        title: '流量体验依然顺畅',
        text: '以应用为核心，提供服务发现、服务编排等功能，满足应用的快速发布、弹性扩展。'
      }, {
        title: '持续集成环境',
        text: '以应用为核心，提供服务发现、服务编排等功能，满足应用的快速发布、弹性扩展。'
      }]
    }
  },

  computed: {},

  methods: {}
}

</script>
<style lang='less' scoped>
  .card {
    .no-border;
  }
  .service-box {
    .card-img-top {
      width: 5 * @1rem;
      margin: auto;
    }
    .card-title {
      .ft16;
      font-weight: 600;
    }
    .card-text {
      .ft12;
      color: @gray;
    }
  }
  .reason-box {
    .service-box;
    background: transparent;
    .card-title {
      font-weight: 400;
    }
    @media @max992 {
      text-align: left!important;
    }
  }
  .industry-box {
    .row>div {
      margin-bottom: 2 * @base-edge;
    }
  }
</style>
